<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="plugins/element-ui/lib/theme-chalk/index.css">
    <style>
        .tac {
            display: flex;
            height: 100vh;
        }

        .nav-wrapper {
            flex-basis: 20%;
        }

        .content {
            flex-grow: 1;
        }

        .main-content {
            flex-grow: 1;
            padding: 20px;
        }

        .placeholder {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row class="tac">
        <el-col :span="5" class="nav-wrapper">
            <h1 style="color: #3a8ee6">会员管理系统</h1>
            <!--左侧导航栏-->
            <el-menu>
                <!--左侧导航栏名称-->
                <div v-for="item in menuList" :key="item.id">
                    <el-submenu :index="item.id" v-if="item.children && item.children.length > 0">
                        <template slot="title">
                            <i :class="item.icon"></i>{{ item.name }}
                        </template>
                        <el-menu-item v-for="childItem in item.children" :index="childItem.id"
                                      :key="childItem.id" @click="menuHandle(childItem)">
                            <span slot="title">{{ childItem.name }}</span>
                        </el-menu-item>
                    </el-submenu>
                    <el-menu-item v-else :index="item.id" @click="menuHandle(item)">
                        <i :class="item.icon"></i>{{ item.name }}
                    </el-menu-item>
                </div>
                <el-menu-item @click="exitLogin()"> > 退出登录</el-menu-item>
            </el-menu>
        </el-col>
        <el-col :span="19" class="content">
            <navbar />
            <div class="navbar">
                <!--左侧展示所选导航栏的名称和返回按钮-->
                <div class="head-label">
                    <span v-if="goBackFlag" class="goBack" @click="goBack()">
                        <img src="images/icons/btn_back@2x.png" alt="" /> 返回
                    </span>
                    <h3>{{ headTitle}}</h3>
                </div>
            </div>
            <!--主体内容-->
            <el-row class="tac placeholder">
                <el-col :span="4/5" class="main-content">
                    <iframe :src="selectedMenu.url" width="100%" height="100%"></iframe>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
</div>
<script src="plugins/vue/vue.js"></script>
<script src="plugins/element-ui/lib/index.js"></script>
<!-- 引入axios -->
<script src="plugins/axios/axios.min.js"></script>
<script src="js/request.js"></script>
<script src="js/validate.js"></script>
<script src="js/index.js"></script>
<script src="api/login.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            menuList: [
                {
                    id: '7',
                    name: '待办事项',
                    url: 'page/stuA/list.html',
                    icon: 'el-icon-user-solid'
                },
                {
                    id: '1',
                    name: '待缴费学生',
                    url: 'page/stuFlow/list.html',
                    icon: 'el-icon-user-solid'
                },
                {
                    id: '3',
                    name: '学生管理',
                    url: 'page/student/list.html',
                    icon: 'el-icon-user-solid'
                },
                {
                    id: '4',
                    name: '班级管理',
                    url: 'page/clazz/list.html',
                    icon: 'el-icon-s-platform'
                },
                {
                    id: '5',
                    name: '账户管理',
                    url: 'page/account/list.html',
                    icon: 'el-icon-notebook-1'
                },
                {
                    id: '6',
                    name: '渠道管理',
                    url: 'page/channel/list.html',
                    icon: 'el-icon-menu'
                },
                {
                    id: '2',
                    name: '员工管理',
                    url: 'page/user/list.html',
                    icon: 'el-icon-s-custom'
                }
            ],
            selectedMenu: {
                name: '待办事项',
                url: 'page/stuA/list.html'
            },
            headTitle: '待办事项',
            goBackFlag: false,
            loading: true,
            timer: null
        },
        computed: {},
        created() {
            const userInfo = window.localStorage.getItem('userInfo');
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo);
            }
            this.closeLoading()
        },
        beforeDestroy() {
            this.timer = null;
            clearTimeout(this.timer);
        },
        mounted() {
            window.menuHandle = this.menuHandle;
        },
        methods: {
            menuHandle(item) {
                this.selectedMenu = { name: item.name, url: item.url};
                this.headTitle = item.name;
            },
            goBack() {
                if (history.length > 1) {
                    history.back();
                } else {
                    // 如果历史记录只有一个，可以跳转到默认的首页或其他逻辑
                    // window.location.href = '默认首页的URL';
                }
            },
            closeLoading(){
                this.timer = null;
                this.timer = setTimeout(()=>{
                    this.loading = false
                },1000)
            },
            exitLogin(){
                this.$confirm('确认退出?', '提示', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                    'type': 'warning'
                }).then(() => {
                    logoutApi().then(res => {
                        window.location.href = 'page/login/login.html';
                    })
                })
            }
        },
    });

</script>
</body>
</html>